<template>
	<view class="viewport">
		<!-- 自定义导航栏 -->
		<CustomNavbar :safeAreaInsets="safeAreaInsets"></CustomNavbar>
		<scroll-view
			class="scroll-view"
			scroll-y
			refresher-enabled
			:refresher-triggered="isTriggered"
			@refresherrefresh="onRefresherrefresh"
			@scrolltolower="onScrolltolower"
		>
			<IndexSkeleton v-if="skeleton == 0"></IndexSkeleton>
			<template v-if="skeleton == 1">
				<!-- 轮播图组件 -->
				<Banner :banners="banners"></Banner>
				<!-- 首页分类 -->
				<Category :categoryList="categoryList"></Category>
				<!-- 热门推荐 -->
				<HotPanel :hotMutliList="hotMutliList"></HotPanel>
				<!-- 猜你喜欢 -->
				<Guess ref="guessRef"></Guess>
			</template>
		</scroll-view>
	</view>
</template>

<script>
	import CustomNavbar from './components/CustomNavbar.vue'
	import Category from './components/Category.vue'
	import HotPanel from './components/HotPanel.vue'
	import 	IndexSkeleton from './components/skeleton.vue'
	import { getHomeBanner, getHomeCategoryMutli, getHomeHotMutli } from '@/services/home.js'
	export default {
		components: {
			CustomNavbar,
			Category,
			HotPanel,
			IndexSkeleton
		},
		data() {
			return {
				safeAreaInsets: {},
				banners: [],
				categoryList: [],
				hotMutliList: [],
				isTriggered: false,	//下拉刷新
				skeleton: -1,
			}
		},
		async onLoad() {
			// 获取屏幕边界到安全区域距离
			const { safeAreaInsets } = uni.getSystemInfoSync()
			this.safeAreaInsets = safeAreaInsets
			this.skeleton = 0
			await Promise.all([this.getBannerList(), this.getHomeCategoryList(), this.getgetHomeHotMutliList()])
			this.skeleton = 1
		},
		methods: {
			// 获取轮播图信息
			async getBannerList(){
				const res = await getHomeBanner()
				this.banners = res.result
			},
			// 获取首页分类
			async getHomeCategoryList(){
				const res = await getHomeCategoryMutli()
				this.categoryList = res.result
			},
			// 获取热么推荐数据
			async getgetHomeHotMutliList(){
				const res = await getHomeHotMutli()
				this.hotMutliList = res.result
			},
			// 下拉刷新
			async onRefresherrefresh(){
				console.log("下拉刷新");
				this.isTriggered = true
				// await this.getBannerList()
				// await this.getHomeCategoryList()
				// await this.getgetHomeHotMutliList()
				// 上面这种写法是等待第一个请求完成请求第二个，直到第三个请求完成才执行下面代码
				// 优化：Promise.all([xxx, xxx, xxx])同时请求三个请求，直到请求完成才执行下面代码
				this.$refs.guessRef.reset()	//需要重置猜你喜欢组件数据
				await Promise.all([
					this.getBannerList(),
					this.getHomeCategoryList(),
					this.getgetHomeHotMutliList(),
					this.$refs.guessRef.getHomeGuessLikeList()
				])
				this.isTriggered = false
			},
			// 滚动条到底部触发
			onScrolltolower(){
				console.log("滚动条到底部触发");
				this.$refs.guessRef.getHomeGuessLikeList()
			},
		}
	}
</script>

<style lang="scss">
.viewport{
	background-color: #f7f7f7;
	height: 100vh;
	display: flex;
	flex-direction: column;
	
	.scroll-view{
		height: calc(100vh - 128px);
	}
}
</style>